<template>
    <!-- 数据列表 -->
    <div class="search-box">
        <div class="search2">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button v-permission="'addProductCate'" @click="addProductCate">添加</el-button>
            </div>
        </div>
    </div>
    <div>
        <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="分类名称" />
            <el-table-column prop="level" label="级别">
                <template #default="{ row }">
                    <span>{{ row.level === 0 ? '一级' : '二级' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productCount" label="商品数量" />
            <el-table-column prop="productUnit" label="数量单位" />
            <el-table-column label="导航栏">
                <template #default="{ row }">
                    <el-switch v-model="row.navStatus
                    " :active-value="1" :inactive-value="0" @change="switchNavStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="是否显示">
                <template #default="{ row }">
                    <el-switch v-model="row.showStatus
                    " :active-value="1" :inactive-value="0" @change="switchShowStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />


            <el-table-column fixed="right" label="设置">
                <template #default="{ row }">
                    <el-button @click="checkLower(row.id)"
                        :disabled="route.query.parentId ? true : false">查看下级</el-button>
                    <el-button>转移商品</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="{ row }">
                    <el-button @click="editProductCate(row.id)" v-permission="'updateProductCate'">编辑</el-button>
                    <el-button type="danger" @click="delProductCate(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
        <ElConfigProvider :locale="locale">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="form.pageSize" :page-sizes="[5, 10, 15]"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </ElConfigProvider>
    </div>
</template>

<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import useTable from '@/hooks/useTable';
import { ref, toRefs, watch, watchEffect } from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { deleteAttrApi, productCategoryListApi, updateNavStatusApi, updateShowStatusApi } from './api';
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter()
const route = useRoute()
const urlId = ref<any>(route.query.parentId)

// 分页器数据
const background = ref(false)
const locale = zhCn

// 传入数据
const form = ref({
    // 搜索框数据
    parentId: 0,
    pageSize: 5,
})
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(productCategoryListApi, form.value)
// console.log(list);


// 修改导航栏状态
const switchNavStatus = (row: IClassificationData) => {
    updateNavStatusApi([row.id], row.navStatus).then((res) => {
        ElMessage.success("修改成功")
    })
}
// 修改显示状态
const switchShowStatus = (row: IClassificationData) => {
    updateShowStatusApi([row.id], row.showStatus).then((res) => {
        ElMessage.success("修改成功")
    })
}

// 添加商品分类
const addProductCate = () => {
    router.push('/pms/addProductCate')
}
// 编辑商品分类
const editProductCate = (id: number) => {
    router.push(`/pms/addProductCate?id=${id}`)
}
// 删除商品分类
const delProductCate = (id: number) => {
    deleteAttrApi(id).then((res) => {
        ElMessage.success("删除成功")
        ListFn()
    })
}

// 查看下级


const checkLower = (parentId: number) => {

    router.push(`/pms/productCate?parentId=${parentId}`)



}

watch(() => route.query.parentId, () => {
    if (route.query.parentId) {
        console.log(route.query.parentId);
        form.value.parentId = parseInt(route.query.parentId as string)
    } else {
        form.value.parentId = 0
    }
    ListFn()
})



</script>
<style lang="less" scoped>
.search-box {
    box-shadow: 0 0 10px 0px #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .search {
        padding: 20px 0px;
        display: flex;


        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            display: flex;
            flex-wrap: wrap;
            // width: 300px;
            margin-left: 40px;

            div {
                width: 250px;
                display: flex;

                span {
                    font-size: 14px;
                    width: 125px;
                    margin-right: 12px;
                }
            }

        }
    }

    .search2 {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {

            span {
                line-height: 20px;
                font-size: 14px;
                align-items: center;
            }
        }


    }
}

.page {
    float: right;
    margin-top: 20px;
}

:deep(.align-c),
:deep(.is-leaf) {
    .cell {
        text-align: center !important;
    }


}
</style>